<!--
 * @Description: 根据描述生成表单,每个表单项，上下两个占位都可以定制化
 * @Author: wangchao
 * @Date: 2022-09-19 10:29:52
-->
<template>
  <div>
    <el-form
      class="myform-container"
      :class="[option.inline ? 'df-aic' : 'df-fdc']"
      ref="ruleFormRef"
      :inline="option.inline"
      :label-position="option.labelPosition"
      :model="form"
      :label-width="option.labelWidth"
      :rules="option.rules"
    >
      <template v-for="(item, index) in cols" :key="index">
        <div style="position: relative" :style="item.itemStyle" :class="[option.labelEllipseAll || item.ellipse ? 'v3-ellipse' : '']">
          <div class="form-item-top">
            <slot :name="`formItemTop-${item.model}`"></slot>
          </div>
          <el-form-item
            :label="item.label"
            :prop="item.model"
            :style="item.formItemStyle"
            :labelInOutFunc="option.labelEllipseAll || item.ellipse ? labelInOutFunc : null"
          >
            <div class="df w100">
              <slot :name="`formItemLeft-${item.model}`"></slot>
              <Comps :item="item" :form="form">
                <template #[item.model]="scope">
                  <slot :name="`comp-option-${item.model}`" :scope="scope || {}"></slot>
                </template>
              </Comps>
              <slot :name="`formItemRight-${item.model}`"></slot>
            </div>
          </el-form-item>
          <div class="form-item-bottom">
            <slot :name="`formItemBottom-${item.model}`"></slot>
          </div>
        </div>
      </template>
    </el-form>
    <el-button @click="submitForm(ruleFormRef)" v-if="option.isSubmit">提交</el-button>
  </div>
  <WindowFixedWrap v-show="tipInfo" :offset="[10, -30]">
    {{ tipInfo }}
  </WindowFixedWrap>
</template>
<script setup>
  // @ts-nocheck
  import WindowFixedWrap from '../WindowFixedWrap'
  // react in vue
  import Comps from './comps'
  const { option } = defineProps({
    option: {
      type: Object,
      default: {},
    },
  })
  provide('api', option.api)
  const form = reactive({})
  const ruleFormRef = ref()
  let cols = ref([])
  watch(
    option,
    (nv) => {
      cols.value = nv?.columns ?? []
      // 依次赋值给v-model
      cols.value.map((c) => {
        form[c.model] = c.value
      })
    },
    { deep: true, immediate: true },
  )

  function submitForm() {
    return new Promise((res, rej) => {
      ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
          res(form)
          console.log('submit!')
        } else {
          rej()
          console.log('error submit!', fields)
        }
      })
    })
  }

  function reset() {
    ruleFormRef.value.resetFields()
  }

  function changeFormModel(model, val) {
    form[model] = val
  }
  const tipInfo = ref('')
  function windowFixedFunc(val = '') {
    tipInfo.value = val
  }
  function labelInOutFunc(f, e) {
    if (!f) {
      tipInfo.value = ''
      return
    }
    windowFixedFunc(e)
  }

  // 暴露出去提交表单操作，供外层控制
  defineExpose({
    submitForm,
    form,
    reset,
    changeFormModel,
  })
</script>
<style scoped lang="scss">
  @import '../index.scss';
  :deep(.el-input__suffix) {
    position: absolute;
    right: 10px;
  }
  :deep(.el-form-item__label) {
    font-weight: bold;
  }
  .v3-ellipse {
    :deep(.el-form-item__label) {
      display: initial;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }
  }
</style>
